;(function() {
  var signs = document.querySelector('#signs').getElementsByClassName('sign');
  var tag = document.querySelector('#tags');
  var tags = tag.getElementsByClassName('tag');
  var Signs = [];
  var Tags = [];
  var timer;

  init();
  function init() {
    for (var i=0;i<signs.length;i++) {
      var tmp = new Sign(signs[i]);
      Signs.push(tmp);
    }

    for (var i=0;i<tags.length;i++) {
      var tmp = new Tag(tags[i]);
      Tags.push(tmp);
    }
  }

  window.moveElement = function(final_x,interval) {
    if (moveElement.movement)
      clearTimeout(moveElement.movement);
    var x_dist = parseInt(tag.style.right);
    if (x_dist == final_x)
      return;
    x_dist = x_dist - Math.ceil((x_dist - final_x)/10);
    tag.style.right = x_dist + 'px';
    var repeat = "moveElement("+final_x+","+interval+")";
    moveElement.movement = setTimeout(repeat,interval);
  }

  function Sign(el) {
    var me = this;
    var src = el.getAttribute('src');
    this.el = el;
    this.el.addEventListener('mouseenter', function() {
      if (src.indexOf('资产') != -1) {
        moveElement(25,30);
        tags[0].style.visibility = 'visible';
      }
      else if (src.indexOf('收藏') != -1) {
        moveElement(25,30);
        tags[1].style.visibility = 'visible';
      }
      else if (src.indexOf('看过') != -1) {
        moveElement(25,30);
        tags[2].style.visibility = 'visible';
      }
      else if (src.indexOf('充值') != -1) {
        moveElement(25,30);
        tags[3].style.visibility = 'visible';
      }
    });
    this.el.addEventListener('mouseleave', function() {
      if (src.indexOf('资产') != -1) {
        timer = setTimeout(function() {
          tags[0].style.visibility = 'hidden';
          moveElement(60,30);
        },1);
      }
      else if (src.indexOf('收藏') != -1) {
        timer = setTimeout(function() {
          tags[1].style.visibility = 'hidden';
          moveElement(60,30);
        },1);
      }
      else if (src.indexOf('看过') != -1) {
        timer = setTimeout(function() {
          tags[2].style.visibility = 'hidden';
          moveElement(60,30);
        },1);
      }
      else if (src.indexOf('充值') != -1) {
        timer = setTimeout(function() {
          tags[3].style.visibility = 'hidden';
          moveElement(60,30);
        },1);
      }
    });
  }

  function Tag(el) {
    var me = this;
    this.el = el;
    this.el.addEventListener('mouseenter', function() {
      clearTimeout(timer);
    });
    this.el.addEventListener('mouseleave', function() {
      me.el.style.visibility = 'hidden';
      moveElement(60,30);
    });
  }
})();
